<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>
<html lang="en">
<head>
<%@include file="/WEB-INF/jsp/qsws/commons/head.jsp"%>
<link rel="stylesheet" type="text/css"
	href="resources/qsws/css/hotClass.css">
<script src="resources/qsws/js/index.js" type="text/javascript"></script>
<script type="text/javascript">
	$(function() {
		var courseListUrl = "qsws/hotCourses";
		var sendedData = {
			"pageNumber" : 1,
			"pageSize" : 10
		};
		var loading = false;
		query(courseListUrl, sendedData);
		$(window).scroll(
				function() {
					if (($(window).scrollTop() + $(window).height() > $(document).height() - 10) && !loading) {
						loading = true;
						sendedData.pageNumber = sendedData.pageNumber + 1;
						query(courseListUrl, sendedData);
					}
				})

		function query(url, sendedData) {
			$.getJSON(url, sendedData, function(data) {
				loading = false;
				if (data == null) {
					alert('无任何数据，请检查接口是否正确');
					return;
				}
				var list = data.courseList;
				if (list != null) {
					if (list.length == 0) {
						return;
					}
					var $a = $('ul a:first');
					for ( var i in list) {
						var $aClone = $a.clone();
						$aClone.attr('href','qsws/toCourseDetailPage');
						$aClone.find('.courseImg').attr('src',(list[i].middle_img ? list[i].middle_img : 'resources/qsws/img/kecheng.jpg'));
						syncAjaxPost('api/course/getCourseCategory', {"courseId" : list[i].id}, function(data2){
							$aClone.find('.courseTag').text(data2.courseCategory?data2.courseCategory.name:'暂无');
						});
						$aClone.find('.title').text(list[i].name);
						$aClone.find('.teacher').text('讲师：' + (list[i].teacher_name?list[i].teacher_name:'暂无'));
						syncAjaxPost('api/course/getCourseMetadata', {"courseId" : list[i].id}, function(data2){
							$aClone.find('.xs').text('学时：' + (data2.courseMetadata ? data2.courseMetadata.period : 0.0));
						});
						syncAjaxPost('api/courseCount/findCourseCountByCourseId', {"courseId" : list[i].id}, function(data2){
							$aClone.find('.rs').text(data2.courseCount ? data2.courseCount.study_num : 0);
						});
						$aClone.show();
						$('ul').append($aClone);
					}
				}
			})
		}
	});
	function syncAjaxPost(url, sendedData, fun) {
		$.ajax({
			type : "POST",
			url : url,
			data : sendedData,
			async : false,
			success : function(receiveData) {
				fun(receiveData);
			}
		});
	}
</script>
</head>
<body>
	<!-- 头部 -->
	<header>
		<a href="javascript:history.back();" class="back"></a>
		<h1>热门课程</h1>
	</header>
	<section>
		<ul>
			<a href="" style="display:none;"><li>
					<div class="img l">
						<img class="courseImg" onerror="this.src='resources/qsws/img/kecheng.jpg'"/>
						<p class="courseTag"></p>
					</div>
					<div class="words r">
						<p class="title ell"></p>
						<p class="msg teacher ell"></p>
						<p class="xueshi">
							<span class="xs"></span><span class="rs"></span>
						</p>
					</div> <img src="resources/qsws/img/li_bak1.png" alt="" class="sanj">
			</li>
			</a>
		</ul>
	</section>
</body>
</html>